// 用来发送请求的模块，也可以叫httpjs
// 最终为api模块服务

import axios from 'axios'
// import { get } from 'core-js/core/dict'
//import { Message } from 'element-ui'
// import { getToken } from './auth'
// import store from '@/store'
// import router from '@/router'
// 1、实例化，调用create、方法
// 定制axios的基地址和超时时间
// 基地址：项目里面大部分的接口前面的协议域名 端口都是一致的，只有后面的相对路径不一样
// 超时时间：接口从发送到返回允许的最大时间差

// service和axios区别
// service = axios + 自定义配置
const service = axios.create({
  baseURL: 'http://localhost:3001/',
  timeout: 5000 // request timeout  接口从发送到返回允许的最大时间差5秒
})

// 请求拦截器
// 做什么？在正式接口发送之前，允许我们对接口参数做一些配置
// 具体做的事情：在请求头中注入token，目的是为了大部分需要鉴权的接口能够统一获取到用户标识
service.interceptors.request.use(
  config => {
    // 这里的return一定不能丢！！！
    // 拿到token，存入请求头
    // const token = getToken()
    // if (token) {
    //   // 前面的authorization和后面的拼接方式都是固定的，属于业内规范
    //   config.headers['Authorization'] = `Bearer ${token}`
    // }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
// 做什么？在数据从后端返回到客户端时先被拦截下来，做一些自己的事
// 具体做的事情：1、401状态吗，token失败，强制跳转回登录以此获得一个有效的token。2、简化组件中请求数据的访问
// 注意事项：以http状态码决定，如果2xx就执行第一个成功回调，不在200-300就走第二个失败回调
// 谁决定了当前的http状态码=>后端

// 为什么选择这里解决？因为很多接口都有此类问题，需要统一解决
// 问题：后端不以200-300作为接口失败的标识，以一个自定义的success作为标识
// 前后端的依据不统一，永远走的都是成功回调
// 解决思路：前端自己判断当前接口成功还是失败，如果成功还是按照之前的逻辑return数据
// 如果失败，手动抛出错误，return Promise.reject()
service.interceptors.response.use(
  response => {
    console.log(response)
    // todo
    const { data } = response
    // if (success) {
    // 接口成功
    return data
    // } else {
    //   // 手动抛出错误,用一个警告弹框一下这个错误
    //   Message.warning(message)
    //   return Promise.reject.data
    // }
  },
  error => {
    // 发生401的位置
    // 判断当前的状态码是否为401 如果有的话 清空数据 并且回到登录页面
    // if (error.response.status === 401) {
    //   store.commit('user/removeUserInfo')
    //   router.push('/login')
    // }
    return Promise.reject(error)
  }
)

export default service
// 默认导出
